<template>
  <app-base class="app-bg">
    <div class='flex'>
      <article>
        <route :comp="{name: 'login'}"></route>
        <!-- <route :comp="{name: 'load-data'}"></route> -->
        <!-- <route  :comp="{name: 'load-params', props: {componentName: 'login'}}"></route> -->
        <!-- <route :comp="{name: 'load-params', props: {dataUrl: ['rs/sql/getMeterBrand','rs/sql/getPriceType','rs/sql/getMeterStyle'], componentName: 'login'}}"></route> -->
      </article>
    </div>
  </app-base>
</template>

<script>
import Login from './components/server/Login'
// import cardListen from './plugins/CardListen'

export default {
  // ready () {
  //   cardListen.startListen()
  // }
  components: { Login }
}
</script>
<style>
  .app-bg {
    background: #F5F5F5;
  }
  .app-input {
    background: #FFF;
    border-bottom: 1px solid #ccc;
  }
  .app-input input, .app-input label {
    padding: 8px 10px;
    border: none;
    outline: none;
    margin: 0px;
  }
  .app-btn {
    display: flex;
    width: 100%;
  }
  .app-btn button{
    flex: 1;
    border-radius: 17px;
    margin: 10px;
  }
  .app-btn button:focus, .app-btn button::selection {
    outline: none;
  }
  .app-list {
    margin-top: 8px;
    background: #FFF;
  }
  .app-list div {
    padding: 6px 10px;
  }
  .app-list div:first-child{
    border-bottom: 1px solid #ccc;
  }
  div[contenteditable=true]{
    height: 80px;
    width: 100%;
    outline: none;
    padding: 8px;
    overflow: scroll;
  }
</style>
